
<template>
    <div class="navMenu">
        <section v-for="(navMenu, index) in navMenus" :key="index">
            <el-menu-item :class="navMenu.children.length < 1 ? 'item-item' : ''" v-if="navMenu.children.length < 1" :key="navMenu.permissionId"  :index="navMenu.httpPath" >
                <i :class="navMenu.icon"></i>
                <span  slot="title">{{navMenu.title}}</span>
            </el-menu-item>
        
            <el-submenu class="aa-submenu" v-if="navMenu.children.length > 0" :key="navMenu.permissionId"  :index="navMenu.httpPath">
                <template slot="title">
                    <i :class="navMenu.icon"></i>
                    <span  > {{navMenu.title}}</span>
                </template>
                <NavMenu :navMenus="navMenu.children"></NavMenu>
            </el-submenu>
        </section>
    </div>
</template>
<script>
export default {
    props: ['navMenus'],
    name: 'NavMenu',
    computed: {
        iss() {
            return this.$store.state.isOpen
        }
    },
}
</script>
<style lang="less" scoped>
    .el-menu--inline{
        height: 100%;
        width: 160px;
        overflow: hidden;
        overflow-y: scroll;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .el-menu-item {
            box-sizing: border-box;
            width: 160px!important;
            text-align: left;
            height: 34px;
            line-height: 34px;
        }
    }
    .el-submenu .el-menu-item{
        min-width: 160px!important;
        height: 34px !important;
        border-radius: 17px;
    }
    .el-submenu .is-opened .el-submenu__title {
        box-shadow: 1px 10px 20px 0px 
        rgba(230, 0, 18, 0.15);
        border-radius: 10px;
        i {
            color: red !important;
        }
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 180px;
        box-sizing: border-box;
        padding:0 10px;
    }
    .el-menu-item {
           
            height: 34px;
            line-height: 34px;
           
        }
    .item-item {
       
                background: #fff1f1 !important;
                color: red;
    }

    
    

    
</style>
